<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LingQue Cloud - 登录</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
            background: #0f0f23;
            color: #ffffff;
            overflow: scroll;
        }
        
        /* 背景动画 */
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b69 100%);
            z-index: -2;
        }
        
        .background::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
                        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
            animation: backgroundShift 20s ease-in-out infinite;
        }
        
        @keyframes backgroundShift {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.1); }
        }
        
        /* 网格背景 */
        .grid-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
            animation: gridMove 30s linear infinite;
        }
        
        @keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }
        
        /* 主容器 */
        .login-container {
            display: flex;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        /* 左侧品牌区域 */
        .brand-section {
            flex: 1;
            max-width: 500px;
            padding-right: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .brand-logo {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
        }
        
        .logo-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-right: 16px;
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
        }
        
        .brand-name {
            font-size: 32px;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .brand-title {
            font-size: 48px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 24px;
            background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .brand-subtitle {
            font-size: 20px;
            color: #8892b0;
            line-height: 1.6;
            margin-bottom: 40px;
        }
        
        .features {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            color: #a0a0a0;
            font-size: 16px;
        }
        
        .feature-icon {
            width: 20px;
            height: 20px;
            margin-right: 12px;
            color: #667eea;
        }
        
        /* 右侧登录表单 */
        .login-section {
            width: 400px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 48px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .login-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #ffffff;
        }
        
        .login-subtitle {
            color: #8892b0;
            font-size: 16px;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 24px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #a0a0a0;
            font-size: 14px;
            font-weight: 500;
        }
        
        .form-input {
            width: 100%;
            padding: 16px 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: #ffffff;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            background: rgba(255, 255, 255, 0.08);
        }
        
        .form-input::placeholder {
            color: #6b7280;
        }
        
        /* 登录按钮 */
        .login-button {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.4);
        }
        
        .login-button:active {
            transform: translateY(0);
        }
        
        .login-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .login-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }
        
        .login-button:hover::before {
            left: 100%;
        }
        
        /* 加载状态 */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 错误消息 */
        .error-message {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #fca5a5;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 14px;
            margin-top: 16px;
            text-align: center;
        }
        
        /* 密码输入框容器 */
        .password-input-container {
            position: relative;
        }
        
        /* 密码可见性切换按钮 */
        .password-toggle {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: color 0.3s ease;
        }
        
        .password-toggle:hover {
            color: #ffffff;
        }
        
        .password-toggle svg {
            width: 20px;
            height: 20px;
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .login-container {
                flex-direction: column;
                text-align: center;
            }
            
            .brand-section {
                padding-right: 0;
                margin-bottom: 40px;
                max-width: 400px;
            }
            
            .brand-title {
                font-size: 36px;
            }
        }
        
        @media (max-width: 480px) {
            .login-section {
                width: 100%;
                padding: 32px 24px;
            }
            
            .brand-title {
                font-size: 28px;
            }
            
            .login-title {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="background"></div>
        <div class="grid-background"></div>
        
        <div class="login-container">
            <!-- 左侧品牌区域 -->
            <div class="brand-section">
                <div class="brand-logo">
                    <div class="logo-icon">🚀</div>
                    <div class="brand-name">LingQue Cloud</div>
                </div>
                
                <h1 class="brand-title">灵雀智能平台</h1>
                <p class="brand-subtitle">现代化的微服务管理解决方案，让您的应用部署和运维变得简单高效</p>
                
                <div class="features">
                    <div class="feature-item">
                        <svg class="feature-icon" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        服务注册与发现
                    </div>
                    <div class="feature-item">
                        <svg class="feature-icon" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        配置中心管理
                    </div>
                    <div class="feature-item">
                        <svg class="feature-icon" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        高效MCP管理
                    </div>
                    <div class="feature-item">
                        <svg class="feature-icon" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        消息队列管理
                    </div>
                </div>
            </div>
            
            <!-- 右侧登录表单 -->
            <div class="login-section">
                <div class="login-header">
                    <h2 class="login-title">欢迎回来</h2>
                    <p class="login-subtitle">登录您的管理账户</p>
                </div>
                
                <form @submit.prevent="handleLogin">
                    <div class="form-group">
                        <label class="form-label">用户名</label>
                        <input 
                            type="text" 
                            class="form-input"
                            v-model="loginForm.username"
                            placeholder="请输入用户名"
                            required
                        >
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">密码</label>
                        <div class="password-input-container">
                            <input 
                                :type="showPassword ? 'text' : 'password'" 
                                class="form-input"
                                v-model="loginForm.password"
                                placeholder="请输入密码"
                                required
                            >
                            <button 
                                type="button" 
                                class="password-toggle" 
                                @click="togglePasswordVisibility"
                                :title="showPassword ? '隐藏密码' : '显示密码'"
                            >
                                <svg v-if="!showPassword" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                                <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                                    <line x1="1" y1="1" x2="23" y2="23"></line>
                                </svg>
                            </button>
                        </div>
                    </div>
                    
                    <button 
                        type="submit" 
                        class="login-button"
                        :disabled="loading || !isFormValid"
                    >
                        <span v-if="loading" class="loading-spinner"></span>
                        {{ loading ? '登录中...' : '登录' }}
                    </button>
                    
                    <div v-if="errorMessage" class="error-message">
                        {{ errorMessage }}
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    loginForm: {
                        username: '',
                        password: ''
                    },
                    loading: false,
                    errorMessage: '',
                    showPassword: false
                };
            },
            
            computed: {
                isFormValid() {
                    return this.loginForm.username.trim() && this.loginForm.password.trim();
                }
            },
            
            methods: {
                togglePasswordVisibility() {
                    this.showPassword = !this.showPassword;
                },
                
                async handleLogin() {
                    if (!this.isFormValid) return;
                    
                    this.loading = true;
                    this.errorMessage = '';
                    
                    try {
                        const response = await axios.post('/api/console/auth/login', {
                            username: this.loginForm.username,
                            password: this.loginForm.password
                        });
                        
                        if (response.data.success) {
                            // 保存认证信息
                            localStorage.setItem('authToken', response.data.token);
                            localStorage.setItem('username', "LQ");
                            
                            // 跳转到管理界面
                            window.location.href = '/index.html';
                        } else {
                            this.errorMessage = response.data.message || '登录失败';
                        }
                    } catch (error) {
                        console.error('登录错误:', error);
                        if (error.response && error.response.data) {
                            this.errorMessage = error.response.data.message || '登录失败';
                        } else {
                            this.errorMessage = '网络错误，请稍后重试';
                        }
                    } finally {
                        this.loading = false;
                    }
                },
                
                // 检查是否已登录
                checkExistingAuth() {
                    const token = localStorage.getItem('authToken');
                    if (token) {
                        // 如果已有token，直接跳转到管理界面
                        window.location.href = '/index.html';
                    }
                }
            },
            
            mounted() {
                this.checkExistingAuth();
            }
        }).mount('#app');
    </script>
</body>
</html>